<template>
<div>
  <div v-if="error$">
    <h1>Your Internet is not active</h1>
    <button v-stream:click="retry$" class="button">Retry</button>
  </div>


  <button v-stream:click="load$" class="button">Load</button>
  <h1>Monster</h1>
  <template v-if="!error$">
    <table>
      <tr>
        <th>Char Name</th>
        <th>Role</th>
        <th>Photo</th>
      </tr>
      <tr v-for="(item, index) in person$" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.role }}</td>
        <td>
          <img :src="item.image_url" alt="">
        </td>
      <tr/>
    </table>
  </template>
</div>
</template>

<script>
/* eslint-disable */
import { Observable, config } from "rxjs"

export default {
  domStreams: ["load$", "retry$"],
  subscriptions() {
    const person$ = 
    Observable.merge(
      this.load$,
      this.retry$
    )
    .switchMap(() => 
    Observable.ajax(
      `https://api.jikan.moe/v3/manga/1/characters`
    )
    .pluck("response")
    .pluck("characters")
    .catch(err => Observable.of("error"))
    .retryWhen(err => err.delay(500))
    )

    const error$ = person$.map(value => value === "error" )

    return {
      person$,
      error$
    }
  }
}
</script>

<style scoped>
.button {
  width: 100px;
  height: 50px;
  margin: 12px;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 600;
  color: black;
}
table {
  width: 100%
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
</style>

